<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/homeIndex' }">
        <i class="el-icon-house"></i> 床位管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>床位查询</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-col :span="24">
      <el-form :inline="true">
        <el-divider content-position="left">请选择区域，当前默认重症一区</el-divider>
        <el-form-item label="区域">
          <el-select placeholder="请选择" v-model="areaid" @change="queryRooms()">
            <el-option v-for="area in areas" :key="area.id" :label="area.name" :value="area.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-col>

    <el-col :span="4">
      <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;房间列表</h3>
      <div class="margin-area"></div>
      <el-menu default-active="2">
        <el-menu-item @click.native="selectAllRooms()">
          <i class="el-icon-location"></i>
          <span>全部房间</span>
        </el-menu-item>
        <el-menu-item v-for="room in rooms" :key="room.id" @click.native="selectRoom(room.id)">
          <i class="el-icon-location"></i>
          <span>{{ room.roomnum }}</span>
        </el-menu-item>
      </el-menu>
    </el-col>

    <el-col :span="18">
      <!-- 放表格数据 -->
      <div class="header-info" v-if="showStatistics">
        <span class="statistic-item">
          本区域床位:
          <span style="color: blue;">{{tableData.length}}</span>
        </span>
        <span class="statistic-item">
          已占用床位:
          <span style="color: red;">{{tableData.filter(item => item.enable).length}}</span>
        </span>
        <span class="statistic-item">
          已禁用床位:
          <span style="color: red;">{{tableData.filter(item => item.status === 0).length}}</span>
        </span>
        <span class="statistic-item">
          可用床位:
          <span
            style="color: green;"
          >{{tableData.filter(item => !item.enable && item.status !== 0).length}}</span>
        </span>
        <input type="checkbox" v-model="onlyShowAvailable" />
        <span>仅看可用</span>
      </div>
      <div class="header-info" v-if="showStatistics1">
        <span class="statistic-item">
          本区域床位:
          <span style="color: blue;">{{tableData1.length}}</span>
        </span>
        <span class="statistic-item">
          已占用床位:
          <span style="color: red;">{{tableData1.filter(item => item.enable).length}}</span>
        </span>
        <span class="statistic-item">
          已禁用床位:
          <span style="color: red;">{{tableData1.filter(item => item.status === 0).length}}</span>
        </span>
        <span class="statistic-item">
          可用床位:
          <span
            style="color: green;"
          >{{tableData1.filter(item => !item.enable && item.status !== 0).length}}</span>
        </span>
        <input type="checkbox" v-model="onlyShowAvailable" />
        <span>仅看可用</span>
      </div>
      <el-table :data="filteredTableData" class="el-table-striped" style="width: 100%">
        <el-table-column prop="number" label="床位号" width="180px"></el-table-column>
        <el-table-column prop="bedName" label="床位名称" width="180px"></el-table-column>
        <el-table-column prop="enable" label="床位状态" width="180px">
          <template slot-scope="scope">
            <span
              :style="{ color: scope.row.enable === 0 ? 'green' : 'red' }"
            >{{ scope.row.enable === 0 ? '空床' : '占用中' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="areaName" label="所属区域" width="180px"></el-table-column>
        <el-table-column prop="roomnum" label="床位房间" width="180px"></el-table-column>
        <el-table-column prop="type" label="房间类型" width="180px"></el-table-column>
        <el-table-column fixed="right" prop="status" label="启用状态" width="120px">
          <template slot-scope="scope">
            <div class="status">
              <span :class="scope.row.status === 0 ? 'dot-disabled' : 'dot-enabled'"></span>
              {{ scope.row.status === 0 ? '已禁用' : '已启用' }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="showPagination">
        <el-pagination
          background
          :page-sizes="[3, 5, 10, 20]"
          :page-size="pageSize"
          :current-page="pageNum"
          layout="total, sizes, prev, pager, next"
          @next-click="nextPage"
          @prev-click="prevPage"
          @size-change="sizeChange"
          @current-change="currentPage"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
export default {
  data() {
    return {
      onlyShowAvailable: false,
      showStatistics: false,
      showStatistics1: false,
      showPagination: false,
      pageNum: 1,
      pageSize: 5,
      total: 0,
      areas: [],
      areaid: "",
      rooms: [],
      tableData: [],
      tableData1: []
    };
  },
  methods: {
    prevPage(val) {
      //点击上一页触发
      this.pageNum = val;
      this.selectAllRooms();
    },
    nextPage(val) {
      //点击下一页触发
      this.pageNum = val;
      this.selectAllRooms();
    },
    sizeChange(val) {
      //val每一页条数
      this.pageNum = 1;
      this.pageSize = val;
      this.selectAllRooms();
    },
    currentPage(val) {
      this.pageNum = val;
      this.selectAllRooms();
    },
    queryCondition() {
      thispageNum = 1;
      this.selectAllRooms();
    },

    //查找所有区域
    queryAllArea() {
      this.showPagination = false;
      this.$axios.get("api/bed/queryAllArea").then(res => {
        if (res.data.code == 200) {
          this.areas = res.data.data;
          // 判断是否有区域，如果有则设置第一个区域的ID到areaid
          if (this.areas.length > 0) {
            this.areaid = this.areas[0].id;
            this.queryRooms();
            this.selectAllRooms();
          }
        }
      });
    },
    //根据区域查询房间
    queryRooms() {
      this.pageNum = 1;
      if (this.areaid) {
        this.showPagination = false;
        this.$axios.get("api/bed/queryByAreaId/" + this.areaid).then(res => {
          if (res.data.code == 200) {
            this.rooms = res.data.data;
            this.selectAllRooms();
          }
        });
      } else {
        this.rooms = [];
      }
    },
    selectRoom(val) {
      this.pageNum = 1;
      this.showStatistics = true;
      this.showStatistics1 = false;
      this.showPagination = false;
      this.$axios.get("api/bed/queryBedByRoomId/" + val).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data;
        }
      });
    },
    selectAllRooms() {
      this.showStatistics = false;
      this.showStatistics1 = true;
      this.showPagination = true;
      let param = new URLSearchParams();
      param.append("areaid", this.areaid);
      param.append("pageNum", this.pageNum);
      param.append("pageSize", this.pageSize);
      this.selectAllRooms1();
      this.$axios.post("api/bed/queryAllBedsByAreaId/", param).then(res => {
        if (res.data.code == 200) {
          let pageData = res.data.data;
          this.tableData = pageData.list;
          //给分页参数赋值
          this.total = pageData.total;
          this.pageNum = pageData.pageNum;
          this.pageSize = pageData.pageSize;
        }
      });
    },
    selectAllRooms1() {
      this.showStatistics = false;
      this.showPagination = true;
      this.$axios
        .get("api/bed/queryAllBedsByAreaId1/" + this.areaid)
        .then(res => {
          if (res.data.code == 200) {
            this.tableData1 = res.data.data;
            console.log(this.tableData1);
          }
        });
    }
  },
  created() {
    this.queryAllArea();
  },
  computed: {
    filteredTableData() {
      if (this.onlyShowAvailable) {
        return this.tableData.filter(
          item => item.status === 1 && item.enable === 0
        );
      }
      return this.tableData;
    }
  }
};
</script>

<style scoped>
.margin-area1 {
  margin-bottom: 37px; /* 您可以根据需求调整这个值 */
}
::v-deep .el-menu-item.is-active {
  color: black;
}
.status {
  position: relative;
  padding-left: 20px;
}
.status .dot-enabled,
.status .dot-disabled {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status .dot-enabled {
  background: green;
}
.status .dot-disabled {
  background: red;
}
.statistic-item {
  margin-right: 20px;
}
.el-col {
  margin: 1rem;
  padding: 2.5rem;
  background: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.el-table {
  margin-top: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.el-form-item {
  margin: 10px 50px; /* 将20px变为10px */
  padding: 5px 0; /* 增加了这行来减少垂直的填充 */
}
.el-pagination {
  margin-top: 20px; /* 或者你觉得合适的值 */
}
</style>